<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      :data="query.baseParams"
      :rules="formRules"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="tableName" title="表名" :item-render="{}">
        <template #default="{data}">
          <vxe-input v-model.trim="data.tableName" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary">查询</vxe-button>
          <vxe-button :disabled="tableData.length===0" status="success" @click="showDesignDialog()">设计</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-table
      :data="tableData"
      :loading="tableLoading"
    >
      <vxe-column field="columnName" title="列名" />
      <vxe-column field="javaName" title="JAVA属性名" />
      <vxe-column field="columnType" title="数据库类型" />
      <vxe-column field="javaType" title="JAVA类型" />
      <vxe-column field="formType" title="表单类型" />
      <vxe-column field="isNullable" title="允许为空" />
      <vxe-column field="columnComment" title="描述" />
    </vxe-table>
    <DesignDialog v-if="designDialogVisible" :columns="tableData" :visible.sync="designDialogVisible" />
  </div>
</template>

<script>
import Api from '@/api/upms/code'
import DesignDialog from './dialog/DesignDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
export default {
  name: 'UpmsCode',
  components: {
    DesignDialog
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      api: {
        query: Api.columns
      },
      query: {
        baseParams: {
          tableName: ''
        }
      },
      formRules: {
        tableName: [
          { required: true, message: '请输入表名' }
        ]
      },
      designDialogVisible: false
    }
  },
  methods: {
    showDesignDialog() {
      this.designDialogVisible = true
    }
  }
}
</script>

<style>

</style>
